<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>图形绘制及比例尺</title>
</head>
<body>

<script src="../node_modules/d3/build/d3.js"></script>
<script>

  const reactHeight = 25;
  let data = [10, 13, 9, 18, 21], colors = ['red', 'orange', 'blue'];

  // 配置线性比例尺
  let linear = d3.scaleLinear()
    .domain([0, 10])
    .range([10, 100]);

  //配置量化比例尺
  // let ordinal = d3.scaleOrdinal(colors); //序数比例尺
  let quantScale = d3.scaleQuantile()
    .domain([d3.min(data), d3.max(data)])
    .range(colors);

  let svg = d3.select('body').append('svg');
  svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', 20)
    .attr('y', function (d, i) {
      return i * reactHeight;
    })
    .attr('width', function (d, i) {
      return linear(d);  // 比例尺设置宽度
    })
    .attr('height', reactHeight - 5)
    .attr('fill', function (d, i) {
      return quantScale(d);
    });

  // 设置坐标

  let axixScale = d3.scaleLinear().domain([0, 30]).range([0, 300]);
  let bot_axix = d3.axisBottom(axixScale).ticks(5);
  svg.append('g')
    .style('transform', 'translate(20px,130px)')
    .call(bot_axix);
  console.log(d3);

</script>


</body>
</html>